<template>
  <div class="hot-search">
    <a-row style="margin: 0 -34px">
      <a-col style="padding: 0 34px; margin-bottom: 24px" :sm="12" :xs="24">
        <div class="num-info">
          <span class="title">
            {{ $t("服务器CPU占用率(%)") }}
          </span>
          <div class="value">
            <span class="total">{{ cpu }}</span>
          </div>
        </div>
        <mini-area :data="cpuRates" style="height: 45px" />
      </a-col>
      <a-col style="padding: 0 34px; margin-bottom: 24px" :sm="12" :xs="24">
        <div class="num-info">
          <span class="title">
            {{ $t("内存占用率(%)") }}
          </span>
          <div class="value">
            <span class="total">{{ ram }}</span>
          </div>
        </div>
        <mini-area :data="ramRates" style="height: 45px" />
      </a-col>
    </a-row>
    <a-tabs>
      <a-tab-pane key="1" tab="存储空间监控">
        <a-table :columns="columns" size="small" :data-source="store"></a-table>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import MiniArea from "@/components/chart/MiniArea";
import moment from "moment";
moment.defaultFormat = "YYYY-MM-DD HH:mm:ss";
import { getView } from "@/services/view.js";
import { getEx } from "@/services/crud.js";
const searchData = [];
for (let i = 0; i < 50; i++) {
  searchData.push({
    index: i + 1,
    keyword: "关键词-" + i,
    count: Math.floor(Math.random() * 1000),
    range: Math.floor(Math.random() * 100),
    status: Math.floor((Math.random() * 10) % 2),
  });
}
const columns = [
  {
    title: "挂载盘符",
    dataIndex: "mount",
  },
  {
    title: "总空间",
    dataIndex: "total",
  },
  {
    title: "已用百分比(%)",
    dataIndex: "usedPercent",
  },
  {
    title: "已用空间",
    dataIndex: "used",
  },
  {
    title: "空闲空间",
    dataIndex: "free",
  },
];

export default {
  name: "HotSearch",
  components: { MiniArea },
  mounted() {
    setTimeout(() => {
      this.refresh();
    }, 2000);
  },

  //i18n: require('./i18n-search'),
  methods: {
    beginTimer() {
     
      this.stopTimer()
      //this.refresh();
      this.timer = setInterval(() => {
        this.refresh();
      }, 10000);
      console.log("!!!!!!!!!!---------begintimer+++++++++",this.timer)
    },
    stopTimer() {
      console.log("!!!!!!!!!!---------stoptimer+++++++++",this.timer)
      if (this.timer) {
        clearInterval(this.timer);
        console.log("!!!!!!!!!!---------stoptimer+++++++++",this.timer)
        this.timer = null;
      }
    },
    refresh() {
      let id = this.$store.state.config.config.self
        ? this.$store.state.config.config.self.id
        : "";
      if (id != "") {
        let self = this;
        this.id = id;
        getView(id)
          .then((view) => {
            if (view && view.values) {
              let store = [];
              view.values.forEach((v) => {
                if (v.pid == "cpuRate") {
                  self.cpu = v.v;
                }
                if (v.pid == "ramRateUsed") {
                  self.ram = v.v;
                }
                if (v.pid == "storeInfo") {
                  while (store.length <= v.pi) {
                    store.push({});
                  }
                  store[v.pi][v.sid] = v.v;
                }
              });
              self.store = store;
            }
          })
          .catch((err) => {
            let { error } = err;
            if (error) {
              if (error.code == 401) {
                clearInterval(self.timer);
              }
            }
          });
        this.queryLine(
          { pid: "cpuRate", sid: "", pi: 0 },
          "recent",
          "cpuRates"
        );
        this.queryLine({ pid: "ram", sid: "", pi: 0 }, "hour", "ramRates");
      }
    },
    handleData(datas) {},
    queryLine(record, type, name) {
      var _this = this;
      getEx(
        "data/view/",
        this.id +
          "?kind=" +
          type +
          "&pid=" +
          record.pid +
          "&subid=" +
          record.sid +
          "&index=" +
          record.pi
      ).then((res) => {
        if (res && res.data && res.data.result) {
          res.data.result.forEach((d) => {
            d.picktime = moment.unix(d.pick_time).format();
          });
          let datas = res.data.result;
          if (datas) {
            datas.sort((a, b) => {
              return a.pick_time - b.pick_time;
            });
            let rates = datas.map((d) => {
              return { x: d.pick_time, y: d.v };
            });

            _this[name] = rates;
          }
        }
      });
    },
  },
  data() {
    return {
      searchData,
      columns,
      cpuRates: [],
      ramRates: [],
      cpu: 20,
      ram: 54,
      id: "",
      store: [],
    };
  },
  computed: {
    tableColumns() {
      let columns = this.columns;
      return columns.map((item) => {
        item.title = this.$t(item.key);
        return item;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.num-info {
  .title {
    color: @text-color-second;
    font-size: 14px;
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
  }
  .value {
    .total {
      color: @title-color;
      display: inline-block;
      line-height: 32px;
      height: 32px;
      font-size: 24px;
      margin-right: 32px;
    }
    .subtotal {
      color: @text-color-second;
      font-size: 16px;
      vertical-align: top;
      margin-right: 0;
      i {
        font-size: 12px;
        color: red;
        transform: scale(0.82);
        margin-left: 4px;
      }
    }
  }
}
</style>